<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="changeCount">累加</button>
    <button @click="changePerson">修改person</button>
    <h1>{{person.age}}--{{person.name}}--{{person.sex}}--{{person.hobby}}</h1>
  </div>
</template>

<script lang="ts">
  import {defineComponent} from "vue"
  export default defineComponent({
    name:'Abort',
  })


</script>
<script setup lang="ts">
import {ref,reactive} from "vue"

  interface personType{
    name:string,
    age:number,
    sex?:string,
    hobby?:string[]
  
  }

  let count = ref(3)
  // 使用reactive生成的对象类型值的响应式数据，返回一个proxy代理对象,值就是这个数据,在模板和setup中可以直接对这个对象进行增删改
  let person = reactive<personType>({
    name:'gaogao',
    age:19,
    sex:'男',
    hobby:['唱','跳']
  })
  console.log(person)
  const changeCount =()=>{
    count.value ++ 
 }
 const changePerson =()=>{
    //1.改
    // person.name='hhh'
    //2.删
    // delete person.sex 
    //3.增
    // person.hobby ='rap'
    //深层次也可以响应式，且对数组的直接操作也可以响应式，不需要使用包装的数组方法
    (person.hobby as string[])[0] = 'rap'

 }

</script>